<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { mapOptions, attribution } from '@/constants/map';
import type { LatLngTuple } from 'leaflet';

// leaflet 地图实例
let map: L.Map | null = null;

// 创建地图
const createMap = () => {
	// 创建地图实例
	map = L.map('leafletMap', mapOptions);
	// 加载图层
	L.tileLayer(import.meta.env.VITE_GAODE_MAP, {
		// 如果设置此项为true，则切片不会用重复填充来表示世界范围（经度-180到180之间）之外的地方
		noWrap: true,
		// 左下角版权信息
		attribution,
	}).addTo(map);
	// 添加标注
	L.marker(mapOptions.center as LatLngTuple)
		.addTo(map)
		.bindPopup('您好! 北京')
		.openPopup();
	// 定义一个比例尺控件
	const scale = L.control.scale();
	// 将比例尺加载到地图容器中
	map.addControl(scale);
};

// 初始化地图
const initMap = () => {
	createMap();
};
// 创建地图
onMounted(() => {
	initMap();
});
// 销毁地图
onBeforeUnmount(() => {
	map?.remove();
	map = null;
});
</script>

<template>
	<div class="map-view">
		<div id="leafletMap" class="map"></div>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
